<template>
  <div id="HomePage" ref="HomePage">
    <TopBar :searchOrNot="true"></TopBar>
    <ListBar v-for="(value, key, index) in  listData" :key="index" :listTheme="key" :listData="value"></ListBar>
    <NotMore></NotMore>
    <FilingBar></FilingBar>
  </div>
</template>

<script>
// 引入组件
import FilingBar from '@/components/reusable/FilingBar.vue';
import NotMore from '@/components/reusable/NotMore.vue';
import ListBar from '@/components/ListBar.vue'
import TopBar from '@/components/reusable/TopBar.vue'
export default {
  components: {
    ListBar, TopBar, NotMore , FilingBar
  },
  data() {
    return {
      // 存储请求到的文章数据
      listData: {},
    }
  },
  methods: {
    // 初始化数据：请求获取所有类型的文章数据
    getArticleData() {
      this.$axios({
        method: "post",
        url: "/article/findArticle/1/" + 4,
      }).then(res => {
        this.listData = res.data
        // 遍历文章数据，添加img属性
        for (let type in this.listData) {
          this.listData[type].forEach(element => {
            element.img = this.GLOBAL.OSSImageUrlRoot + 'headerImage/' + element.id + '.png'
          });
        }
      }, err => {
        console.log("获取文章数据失败！详细信息：" + err);
      })
    }
  },
  mounted() {
    this.getArticleData()
  }
}
</script>

<style lang="scss" scoped>
#HomePage {
  display: inline-block;
}
</style>